<!DOCTYPE html>
<html lang="en">
<style>
    .zebra-table tbody tr:nth-child(even) {
        background-color: #edecec;
        /* 设置偶数行的背景颜色 */
    }

    .zebra-table td {
        /* font-weight: bold; */
        font-size: 16px;
    }

    .zebra-table th {
        /* font-weight: bold; */
        font-size: 15px;
    }

    .card-container {
        display: flex;
    }

    .card-container .el-card:nth-child(odd) {
        border: 2px solid #B8860B;
    }

    .card-container .el-card:nth-child(even) {
        border: 2px solid #B8860B;
    }



    .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 20px;
        /* 添加上边距 */
        margin-bottom: 20px;
        /* 添加下边距 */
    }

    .card-item {
        width: 30%;
        margin: 20px 0;
        /* 上下各添加20像素的外边距 */
        padding: 10px;
        /* 添加内边距 */
        border: 1px solid gold;
    }

    @media (max-width: 768px) {
        .card-item {
            width: 48%;
        }
    }

    @media (max-width: 480px) {
        .card-item {
            width: 100%;
        }
    }
</style>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>募捐大厅</title>
    <!-- 引入 element-ui 的样式文件 -->
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <h2 style="text-align: center;">募捐大厅</h2>
        <el-row style="color: #B8860B;">
            <el-col :span="6">
                最小年龄: <el-input-number v-model="minAge" :min="0" :max="150" label="最小年龄" controls-position="right"
                    placeholder="请输入最小年龄"></el-input-number>
            </el-col>
            <el-col :span="6">
                最大年龄: <el-input-number v-model="maxAge" :min="0" :max="150" label="最大年龄" controls-position="right"
                    placeholder="请输入最大年龄"></el-input-number>
            </el-col>
            <el-col :span="6">
                <el-input v-model="name" placeholder="对原因和名字进行检索" style="color: #B8860B;"></el-input>
            </el-col>
            <el-col :span="6">
                <el-button @click="search">查询</el-button>
                <el-button type="primary" @click="changeStyle">切换卡片样式</el-button>

            </el-col>
        </el-row>

        <template v-if="tableStyle === 'table'">
            <el-table class="zebra-table" :data="donationList" :default-sort="{ order: 'ascending'}">
                <el-table-column label="募捐ID" prop="donationId"></el-table-column>
                <el-table-column label="募捐人" prop="donationImage">
                    <template slot-scope="scope">
                        <img :src="`http://${scope.row.donationImage}`" style="width: 50px; height: 50px;" />
                        <p>{{ scope.row.alias }} {{ scope.row.age }}岁</p>
                    </template>
                </el-table-column>
                <el-table-column label="募捐原因" prop="donationReason"></el-table-column>
                <el-table-column label="截止时间" prop="deadline" sortable></el-table-column>
                <el-table-column label="救助金额" prop="donationAmount" sortable></el-table-column>
                <el-table-column label="已募金额" prop="donatedAmount" sortable></el-table-column>
                <el-table-column label="完成度" prop="completion" sortable></el-table-column>
                <el-table-column label="积分" prop="materialPoints"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="goToSubmitDonation(scope.row)">进入募捐详情页面</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <template v-else>
            <div class="card-container">
                <el-card v-for="item in donationList" :key="item.donationId" class="card-item">
                    <img width="400px" height="400px" :src="`http://${item.donationImage}`">
                    <p>募捐ID: {{ item.donationId }}</p>
                    <p>{{ item.alias }} {{ item.age }}岁</p>
                    <p>募捐原因: {{ item.donationReason }}</p>
                    <p>截止时间: {{ item.deadline }}</p>
                    <p>救助金额: {{ item.donationAmount }}</p>
                    <p>已募金额: {{ item.donatedAmount }}</p>
                    <p>完成度: {{ item.completion }}</p>
                    <p>积分: {{ item.materialPoints }}</p>
                    <el-button type="text" @click="goToSubmitDonation(item)">进入募捐详情页面</el-button>
                </el-card>
            </div>
        </template>

    </div>

    <script>
        // 创建 Vue 实例
        new Vue({
            el: '#app',
            data: {
                donationList: [],
                minAge: '',
                maxAge: '150',
                name: '',
                tableStyle: 'table'
            },
            created() {
                this.search(); // 页面加载时自动触发查询
            },
            methods: {
                goToSubmitDonation(row) {
                    index = this.donationList.indexOf(row);
                    localStorage.setItem("index", index);
                    // 在这里编写跳转逻辑
                    localStorage.setItem("donationId", row.donationId);
                    window.location.href = "./userDonation.html";
                },
                search() {
                    axios.get('http://localhost:8888/api/donation/list', {
                        params: {
                            minAge: this.minAge,
                            oldAge: this.maxAge,
                            name: this.name
                        }
                    })
                        .then(response => {
                            this.donationList = [];
                            this.donationList = response.data.data;
                            let donationIds = this.donationList.map(item => item.donationId);
                            localStorage.setItem("donationIds", JSON.stringify(donationIds));
                            this.calculateCompletion();
                        })
                        .catch(error => {
                            // 请求失败时的处理
                            console.error('请求出错：', error);
                        });
                },
                calculateCompletion() {
                    this.donationList.forEach(item => {
                        item.completion = (item.donatedAmount / item.donationAmount * 100).toFixed(2) + '%';
                        // 截取日期部分，只保留年月日
                        item.deadline = item.deadline.substring(0, 10);
                    });
                },
                changeStyle() {
                    if (this.tableStyle === 'table') {
                        this.tableStyle = 'card';
                    } else {
                        this.tableStyle = 'table';
                    }
                }
            }
        });
    </script>
</body>

</html>